.stage {
  &__container {
    display: flex;
    align-items: center;
    position: relative;
    &--last {
      .stage__indicator::after {
        display: none;
      }
    }
    &--wait {
      .stage__indicator {
        background-color: #e0e0e0;
        &::after {
          border-right: 2px solid #e0e0e0;
        }
      }
    }
    &--doing {
      .stage__indicator {
        background-color: #fff;
        border: 4px solid var(--mainColor);
        box-sizing: border-box;
        &::after {
          border-right: 2px dashed var(--mainColor);
        }
      }
    }
  }
  &__indicator {
    min-width: 20px;
    width: 20px;
    height: 20px;
    background-color: var(--mainColor);
    margin-right: 10px;
    border-radius: 50%;
    transition: all 0.2s;
    &:hover {
      background-color: var(--mainActiveColor);
      &::after {
        border-right: 2px solid var(--mainActiveColor);
      }
    }

    &::after {
      content: '';
      border-right: 2px solid var(--mainColor);
      position: absolute;
      left: 9px;
      top: calc(50% + 10px);
      height: 100%;
      margin: auto;
      transition: all 0.2s;
    }
  }
  &__content {
    overflow: auto;
    & > div {
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
